<template>
  <div class="p-l-15 p-r-15" style="padding-bottom:100px;">
      <van-nav-bar
      fixed
      >
        <div style="position: relative;" slot="title">
          <div style="color:#FFFFFF;font-size:14px;width:100px;">NFT</div>
          <img :src="require('@/assets/imgs/134134132.png')" style="width:12px;height:12px;position: absolute;
    right: 24px;
    top: 0;"/>
        </div>
      </van-nav-bar>
      <div style="padding-top:50px;"></div>
      <van-collapse v-model="activeNames" accordion @change="accordionChange">

          <van-collapse-item title="未质押（0）" name="1">
              <div slot="title" class="view flex-row align-center">
                  <img :src="require('@/assets/imgs/12314214.png')" style="width:24px;height:24px;margin-right:5px;"/>
                  <div style="color:#FE974F;font-size:14px;">未质押（{{jsTotal}})</div>
              </div>
              

              <div class="view flex-row align-center justify-between m-b-20">
                  <div>
                      <van-button style="width:156px;background: transparent;" round color="#D5BFB2" plain  type="info" icon="after-sale" @click="zyNFT">质押全部</van-button>
                  </div>
              </div>
              
              <div class="view flex-row flex-wrap" style="margin-right:-15px;">
                  <template v-if="jsList.length > 0">
                        <div style="width:calc(100% / 2 - 40px);background-color:#24232D;padding-top: 15px;padding-bottom: 15px;border-radius: 10px;position: relative;" class="p-l-12 p-r-12 view align-center m-r-15 m-b-15" v-for="(item,index) in jsList" :key="index" >
                            <!-- <van-checkbox checked-color="rgb(236, 149, 79)" shape="square" class="check-item" :value="item.checked"></van-checkbox> -->
                            <div style="border-radius: 5px;overflow:hidden;" class="m-b-15" @click="prevImg(require('@/assets/imgs/Mobius-NFT.jpg'))">
                              <img data-position="2" data-blur="4" data-focus="200" data-falloff="400" data-direction="y" :src="require('@/assets/imgs/Mobius-NFT.jpg')" class="tiltshift" style="width:100%;height:100%;" />
                            </div>
                            <!--<div style="border-radius: 5px;overflow:hidden;" class="m-b-15" @click="prevImg(item.originalNft.image)">
                                <img data-position="2" data-blur="4" data-focus="200" data-falloff="400" data-direction="y" :src="item?.originalNft?.image ?? ''" class="tiltshift" style="width:100%;height:100%;" />
                            </div>-->
                            <div class="width100">
                                <div style="color: #fff;" class="fz-14">Mobius NFT #{{ item.id }}</div>
                                <div class="view flex-row align-center  justify-between width100">
                                </div>
                                
                            </div>
        
                            <div class="view  width100">
                                <div style="color:#707070;font-size:12px;">{{  item.create_time.replace('2022-', '') }}</div>
                                <div class="view flex-row align-center " style="margin-top:10px;display: flex;
    justify-content: center;">
                                    <van-button type="primary" plain round color="#D7C19A" size="small" style="width:100px;margin-right:15px;background-color: transparent;" icon="after-sale" @click="zyNFT(item)" v-if="item.type == 2">质押</van-button>
                                    <van-button type="primary" round color="linear-gradient(180deg, #FE9C52 0%, #FE7A3F 100%)" size="small" style="width:100px;" icon="shop-o" @click="saleTo(item)" v-if="item.type == 1">寄售</van-button>
                                </div>
                                
                            </div>
                        </div>
                  </template>
                  <van-empty
                    v-else
                    class="custom-image"
                    image="https://taiyuanpower.oss-cn-hangzhou.aliyuncs.com/wxapp/x/2412341234.png"
                  />

              </div>
          </van-collapse-item>

          <van-collapse-item title="已质押（633)" name="2">
              <div slot="title" class="view flex-row align-center">
                  <img   :src="require('@/assets/imgs/2134141.png')" style="width:24px;height:24px;margin-right:5px;"/>
                  <div style="color:#FE974F;font-size:14px;">已质押（{{zyList.length}})</div>
              </div>

              <div class="view flex-row align-center justify-between m-b-20">
                  <div>
                      <van-button style="width:156px;background: transparent;" round color="#D5BFB2" plain  type="info" icon="replay" @click="doreflush">全部刷新</van-button>
                  </div>
              </div>
              <div class="view flex-row flex-wrap" style="margin-right:-15px;">
                  <template v-if="zyList.length > 0">
                        <div style="width:calc(100% / 2 - 40px);background-color:#24232D;padding-top: 15px;padding-bottom: 15px;border-radius: 10px;" class="p-l-12 p-r-12 view align-center m-r-15 m-b-15" v-for="(item,index) in zylist" :key="index">
                            <div style="border-radius: 15px;" class="m-b-15" @click="prevImg(item.originalNft.image)">
                                <img :src="item.originalNft.image"  style="width:100%;height:100%;"/>
                            </div>
                            <div>
                                <div style="color: #fff;" class="fz-14 m-b-12">{{ item.originalNft.name }}</div>
                                <div style="color:#EC954F;" class="fz-18">{{ item.price }}</div>
                            </div>
        
                            <div class="view flex-row align-end  justify-between width100">
                                <div style="color:#707070;font-size:12px;margin-right: 12px;">{{  item.create_time.replace('2022-', '') }}</div>
                            </div>
                        </div>
                  </template>
                  <van-empty
                    v-else
                    class="custom-image"
                    image="https://taiyuanpower.oss-cn-hangzhou.aliyuncs.com/wxapp/x/2412341234.png"
                  />
              </div>
          </van-collapse-item>

          <van-collapse-item title="创世NFT（0)" name="3">
              <div slot="title" class="view flex-row align-center">
                  <img  :src="`${require('@/assets/imgs/Vector.png')}`" style="width:21px;height:17px;margin-right:5px;"/>
                  <div style="color:#FE974F;font-size:14px;">创世NFT（{{total}})</div>
              </div>

              <div class="view flex-row align-center justify-between m-b-20">
                  <!-- <div>
                      <van-button style="width:calc(100% / 2 - 40px);background: transparent;" round color="#D5BFB2" plain  type="info" icon="smile-comment-o" >第一批铸造</van-button>
                  </div> -->
                  <div>
                      <van-button style="width:156px;background: transparent;" round color="#D5BFB2" plain  type="info" icon="filter-o" @click="doFilter">筛选</van-button>
                  </div>
              </div>
              
              <van-list
                v-model="loading"
                :finished="finished"
                @load="getMore"
                finished-text="没有更多了"
                >
                    <div class="view flex-row flex-wrap" style="margin-right:-15px;">
                        <template v-if="olList.length > 0">
                                <div style="width:calc(100% / 2 - 40px);background-color:#24232D;padding-top: 15px;padding-bottom: 15px;border-radius: 10px;" class="p-l-12 p-r-12 view align-center m-r-15 m-b-15" v-for="(item,index) in olList" :key="index">
                                    <div style="border-radius: 15px;" class="m-b-15" @click="prevImg(item.image)">
                                        <img data-position="2" data-blur="4" data-focus="200" data-falloff="400" data-direction="y" :src="item.image"  style="width:100%;height:100%;" />
                                    </div>
                                    <div style="width:100%;">
                                        <div style="color: #fff;margin-bottom:5px;" class="fz-14">{{ item.name }}</div>
                                        <div style="color:#EC954F;" class="fz-18">{{ item.price }}</div>
                                    </div>
                
                                    <div class="view flex-row align-end  justify-between width100">
                                        <div style="color:#707070;font-size:12px;margin-right: 12px;">{{item.create_time.replace('2022-', '')}}</div>
                                    </div>
                                </div>
                        </template>
                        <van-empty
                            v-else
                            class="custom-image"
                            image="https://taiyuanpower.oss-cn-hangzhou.aliyuncs.com/wxapp/x/2412341234.png"
                        />

                    </div>
              </van-list>

          </van-collapse-item>

      </van-collapse>
      <Tabbar/>
      <van-image-preview v-model="showPrev" :images="images"  />

      <van-action-sheet v-model="showAction" :closeable="false">
            <div class="content">
                    <van-picker
                        show-toolbar
                        :columns="columns"
                        @confirm="onConfirm"
                        @cancel="onCancel"
                        @change="onChange"
                    />
            </div>
      </van-action-sheet>

      <Sale ref="saleDay" @onSuccess="getJSList"/>
  </div>

</template>

<script>
import Sale from '@/components/sale'
import Web3 from '@/util/web3.min'
import Tabbar from '@/components/Tabbar.vue'
import { myNftListByBuyList, getMyNftListByOriginNft, ZYNFTList, reflushNFT, toPledgeNft } from '@/api/index'
export default {
  components:{
      Tabbar,
      Sale
  },
  data: function () {
    return {
        active: 0,
        total: 0,
        jsTotal:0,
        reflushLoading: false,
        showAction: false,
        columns: [ '金额从高到低', '金额从低到高'],
        images: [],
        showPrev: false,
        activeNames: '1',
        jsList: [],
        olList: [],
        zyList: [],
        queryForm: {
            pages: 0,
            limit: 8
        },
        loading: false,
        finished: false,
        web3: null,
        filterValue: ''
    }
  },
  async mounted () {
    this.web3 = new Web3(window.ethereum);
    await this.getJSList()
    await this.getPledgeList()
    this.queryForm.pages = 1
    await this.getOriginList()
    $('.tiltshift').tiltShift();
  },
  methods: {
    doFilter() {
        this.showAction = true
    },
    onChange(picker, val) {
        
    },
    onCancel() {
        this.showAction = false
    },
    onConfirm(val) {
        if (val == '金额从高到低') {
            this.queryForm.order_type = 3
        } else {
            this.queryForm.order_type = 4
        }
        this.showAction = false
        this.queryForm.pages = 1
        this.getOriginList()
    },
    // 刷新
    async doreflush() {
        this.$dialog.confirm({
            message: '确认刷新？',
        }).then( async () => {
            // on confirm
            this.reflushLoading = true
             const res = await reflushNFT({})
            this.reflushLoading = false
            if (res.code == 1) {
                this.getJSList()
            } else {
                this.$toast({message: res.msg, duration: 5000})
            }
        })
        .catch(() => {
            // on cancel
        });
    },
    getMore() {
        this.queryForm.pages++
        this.getOriginList()
    },
    prevImg(img) {
        this.images = [img]
        this.showPrev = true
    },
    // 卖
    saleTo (data) {
        this.$refs.saleDay.show(data)
    },
    // 质押
    zyNFT(item) {
        let msgc = ''
        if (item.code) {
            msgc = '确认质押当前NFT吗？'
        } else {
            msgc = '确认质押全部的NFT吗？'
        }
        this.$dialog.confirm({
            message: msgc,
        }).then( () => {
            // on confirm
            this.web3.eth.personal.sign("Sign to stake", this.$store.getters.address).then( async () => {
                this.pleLoading = true
                let res
                if (item) {
                    res = await toPledgeNft({nft_id: item.id, nft_code: item.code,type: 3})
                } else {
                    res = await toPledgeNft({type: 2})
                }
                this.pleLoading = false
                if (res.code == 1) {
                    await this.getPledgeList()
                } else {
                    this.$toast({message: res.msg, duration: 5000})
                }
            }).catch( () => {
                    this.$toast({message: '您未操作~', duration: 5000})
            })
            
        })
        .catch(() => {
            // on cancel
        });
    },
    // 折叠
    accordionChange(activeNames) {
        this.jsList = []
        this.olList = []
        this.zyList = []
        if (activeNames == 1) {
            this.getJSList()
        } else if (activeNames == 2) {
            this.getPledgeList()
        }
        else if (activeNames == 3) {
            this.queryForm.pages = 1
            this.getOriginList()
        }
    },
    // 获取质押的NFTlist
    async getPledgeList() {
        const res = await ZYNFTList({})
        this.zyList = res.data
    },
    
    // 获取创世款
    async getOriginList() {
        const res = await getMyNftListByOriginNft(this.queryForm)
        this.loading = false
        if (this.queryForm.pages == 1) {
            this.olList = res.data.list
        } else {
            this.olList = [...this.olList, ...res.data.list]
        }
        this.total = res.data.total
        if (this.olList.length == res.data.total) {
            this.finished = true;
        }
    },
    setCheck(i) {
        if (!this.jsList[i]['checked']) {
            this.$set(this.jsList[i], 'checked' , true)
        } else {
            this.$set(this.jsList[i], 'checked' , false)
        }
        
        
    },
    // 寄售列表
    async getJSList() {
        const res = await myNftListByBuyList({})
        this.jsList = res.data.map(item => {
            item.checked = false
            return item
        })
        this.jsTotal = this.jsList.length
    }
  }

}
</script>

<style>
.custom-image {text-align: center;margin: 0 auto;}
.view {display: flex;flex-direction: column;}
.height100 {height: 100%;}
.width100 {width: 100%;}
.flex-row {flex-direction: row;}
.flex-1 {flex: 1;}
.flex-2 {flex:2;}
.flex-1-50 {flex: 0 0 50%;}
.flex-wrap {flex-wrap: wrap;}
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-center {justify-content:center;}
.ovhidden {overflow: hidden;}
.justify-between {justify-content:space-between;}
.justify-around {justify-content:space-around;}
.align-start {align-items:flex-start;}
.align-end {align-items:flex-end;}
.align-center {align-items:center;}
.align-stretch {align-items:stretch;}
.c-333 {font-size: #333;}
.fz-20 {font-size: 30px;}
.c-663 {color: #66625C;}
.c-d7c {color: #D7C19A;}
.fz-12 {font-size: 12px;}
.fz-14 {font-size: 14px;}
.fz-18 {font-size: 18px;}
.c-fff {color: #fff;}
.width100 {width: 100%;}
.p-l-24 {padding-left: 24px;}
.p-r-24 {padding-right: 24px;}
.p-t-16 {padding-top: 16px;}
.m-b-36 {margin-bottom: 36px;}
.b-r-radius-20 {border-radius: 20px;}
.bg-242 {background-color: #24232D;}
body {background-color: #19181F;}
.m-b-30 {margin-bottom: 30px;}
.p-l-30 {padding-left: 30px;}
.p-r-30 {padding-right: 30px;}
.p-t-20 {padding-top: 20px;}
.p-b-20 {padding-bottom: 20px;}
.p-r-20 {padding-right: 20px;}
.p-l-20 {padding-left: 20px;}
.bold {font-weight: bold;}
.c-070 {color: #707070;}
.m-r-20 {margin-right: 20px;}
.m-b-5 {margin-bottom: 5px;}
.van-tabbar {background: #19181F;}
.van-tabbar-item {background: #19181F;}
[class*=van-hairline]::after {content: none !important;}
.van-collapse-item__title {
    background: transparent;
    border: 1px solid #D7C19A;
    border-radius: 20px;
    color: #FE974F;
}
.van-nav-bar {
  background-color: #19181F;
}
.m-b-15 {margin-bottom: 15px;}
.m-r-15 {margin-right: 15px;}
.p-l-12 {padding-left: 12px;}
.p-r-12 {padding-right: 12px;}
.m-b-12 {margin-bottom: 12px;}
.p-l-15 {padding-left: 15px;}
.p-r-15 {padding-right: 15px;}
.m-b-20 {margin-bottom: 10px;}
.van-cell--clickable:active {background-color: transparent;}
.van-collapse-item__content {background-color: transparent;padding: 12px 0;}
.s-bg-imgs {background-image: url(../assets/imgs/12341.png);background-size: cover;background-repeat: no-repeat;background-position: center;}
.van-collapse-item {margin-bottom: 15px;}
.check-item {
    position: absolute;
    left: 0px;
    z-index: 99;
    top: 0;
    border: 1px solid rgb(236, 149, 79);
    border-radius: 15px;
    border-bottom-right-radius: 100px;
}

    
</style>